<template>
	<main>
		<!-- APP导航栏隔离 -->
		<StatusBar></StatusBar>
		<header>
			<!-- iconfont 菜单 -->
			<i class="iconfont icon-caidan"></i>
			<ul>
				<template
					v-for="(item, index) in headerList"
					:key="index">
					<li
						:class="{ active: headerActive === index }"
						@click="headerHandler(index)">
						{{ item }}
					</li>
					<li></li>
				</template>
			</ul>
			<!-- iconfont 更多 -->
			<i class="iconfont icon-sandian"></i>
		</header>

		<!-- 风格 -->
		<div class="style">
			<div
				class="toggle"
				@click="uploadStyles">
				<b class="title">{{ styles.title }}</b>
				<span>
					<i class="iconfont icon-duoxunhuan"></i>
					换个风格
				</span>
			</div>
			<span class="content">{{ styles.content }}</span>
		</div>

		<!-- 搜索 -->
		<SearchInput />

		<!-- 音乐雷达 -->
		<MusicGroup>
			<template #title>
				音乐雷达
				<svg
					class="icon"
					aria-hidden="true"
					width="20"
					height="18">
					<use xlink:href="#icon-a-diezichangpianyinle"></use>
				</svg>
			</template>
			<div class="musicRadar">
				<MusicItem
					v-for="item in personalizedList"
					type="square"
					:key="item.id"
					:src="item.picUrl"
					:musicName="item.name"
					:playCount="item.playCount" />
			</div>
		</MusicGroup>

		<!-- 磁力音波 -->
		<MusicGroup>
			<template #title>
				磁力音波
				<svg
					class="icon"
					aria-hidden="true"
					width="20"
					height="18">
					<use xlink:href="#icon-mianxingcitie"></use>
				</svg>
			</template>
			<MusicItem
				v-for="item in personalizedNewsongList"
				type="rectangle"
				:key="item.id"
				:entirety="item.song" />
		</MusicGroup>

		
	</main>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { personalized, personalizedNewsong } from '@/modules/request';
import { personalizedResult } from '@/types/index';
import SearchInput from '@/components/SearchInput.vue'; // 组件 搜索
import MusicGroup from '@/components/MusicGroup.vue'; // 组件 音乐组
import MusicItem from '@/components/MusicItem.vue'; // 组件 音乐项

/** header 选中项 */
const headerActive = ref<number>(0);
/** header 列表数据 */
const headerList = reactive<string[]>(['探索', '推荐']);
/** header 选中处理方法 */
const headerHandler = (index: number) => {
	headerActive.value = index;
};

/** 风格 数据 */
const styles = reactive({
	title: '摇滚',
	content: '感受20世纪50年代的浪潮。',
});
/** 风格 更新 */
const uploadStyles = () => {};

/** 音乐雷达 数据 */
let personalizedList = reactive<personalizedResult[]>([]);
/** 获取音乐雷达数据 */
const getPersonalized = async () => {
	const result = Object.freeze(await personalized(8));
	personalizedList = Object.assign(personalizedList, result.result);
};
getPersonalized();

/** 磁力音波 数据 */
let personalizedNewsongList = reactive<any[]>([]);
const getPersonalizedNewsong = async () => {
	const result = await personalizedNewsong();
  personalizedNewsongList = Object.assign(personalizedNewsongList, result.result);
};
getPersonalizedNewsong();
</script>

<style lang="scss" scoped>
@import './scss/index.scss';
</style>
